<template>
  <div class="index-aside">
    <!--        个人信息-->
    <basic-panel v-if="isLogin" class="panel create" :isHeader="false">
      <template>
        <button class="create-button" @click="create">发布话题</button>
      </template>
    </basic-panel>
    <!--    个人信息-->
    <basic-panel v-if="isLogin" class="panel my">
      <template v-slot:header>个人信息</template>
      <template>
        <div class="my-holder">
          <div>
            <img class="user-avatar" :src="avatarSrc" alt="默认头像">
            <div class="user-name"><span @click="profile">{{ this.$store.state.user.username }}</span></div>
          </div>
        </div>
      </template>
    </basic-panel>
    <!--    友情链接-->
    <basic-panel class="panel link" :noPadding="true">
      <template v-slot:header>友情链接</template>
      <template>
        <BasicLink></BasicLink>
      </template>
    </basic-panel>
    <!--    友情链接-->
    <!--    排行榜-->
    <basic-panel class="panel integral" :noPadding="true">
      <template v-slot:header>排行榜</template>
      <template>
        <BasicIntegral></BasicIntegral>
      </template>
    </basic-panel>
    <!--    排行榜-->
    <!--    社区状态-->
    <basic-panel class="panel status" :noPadding="true">
      <template v-slot:header>社区状态</template>
      <template>
        <BasicStatus></BasicStatus>
      </template>
    </basic-panel>
    <!--    社区状态-->
  </div>
</template>

<script>
import BasicPanel from '@components/common/panel/BasicPanel.vue'
import BasicLink from '@components/common/Link.vue'
import BasicIntegral from '@components/common/Integral.vue'
import BasicStatus from '@components/common/Status.vue'
import {ORIGIN} from '../../config'

export default {
  name: 'index-aside',
  data() {
    return {
      isHide:true,
    }
  },
  components: {
    BasicPanel,
    BasicLink,
    BasicIntegral,
    BasicStatus
  },
  methods: {
    router(path) {
      if (this.$route.path === path) return
      this.$router.replace(path)
    },
    create() {
      if (this.$store.state.user.username) {
        this.router('/create')
      } else {
        alert('请先登录')
        if (this.$route.path !== '/login')
          this.$router.push('/login')
      }
    },
    profile() {
      if (this.$store.state.user.username) {
        this.router('/profile')
      }
    },
    login() {
      this.router('/login')
    }
  },
  computed: {
    // 判断是否登录
    isLogin() {
      if (this.$store.state.user.username) return true
      else return false
    },
    // 计算头像src
    avatarSrc() {
      if (this.$store.state.user.avatar) {
        return this.$store.state.user.avatar
      } else return ORIGIN + '/public/img/default/avatar-default.png'
    }
  },
}
</script>

<style lang="scss" scoped>
.panel {
  width: 290px;
  margin-bottom: 12px;
}

.my-holder {
  position: relative;
  height: 50px;
}

// 登录提示
.please-login {
  @include dark-button;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 用户头像
.user-avatar {
  width: 48px;
  border: 1px solid $bgGrey;
  margin-right: 10px;
}

.user-name {
  height: 50px;
  width: 200px;
  display: inline-block;
  position: relative;

  span {
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

.create {
  position: relative;

  .create-button {
    @include basic-button;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 93%;
    padding: 10px 10px;
  }

  .my-holder {
    display: none;
  }
}

.logo {
  background-color: #444444;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}

.my-github {
  color: #00f;

  &:hover {
    text-decoration: underline;
  }
}

// 移动端
@media (max-width: $action-width) {
  .panel {
    width: 100%;
    margin: 10px auto;
  }
  .my {
    display: none;
  }
  .login {
    display: none;
  }
  .link {
    display: none;
  }
  .integral {
    display: none;
  }
  .status {
    display: none;
  }
  .create {
    .my-holder {
      display: block;
    }
    .create-button {
      right: 15px;
    }
  }
  .community {
    display: none;
  }
  .banner {
    display: none;
  }
  .focus-me {
    display: none;
  }
}
</style>
